<template>
    <aside>
        <!--导航菜单-->
        <el-menu :default-active="$route.path" default-active="1"
            unique-opened router>
            <el-menu-item-group v-if="!item.hidden" :key="index" :title="item.name" v-for="(item, index) in $router.options.routes" >
                <template slot="title">
                    <div class="menu-title">
                        <i :class="item.iconCls"></i> {{item.name}}
                    </div>
                </template>
                <el-menu-item v-if="!child.hidden" :index="child.path" :key="child.path"  v-for="(child, index) in item.children">{{child.name}}</el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </aside>

</template>

<script>
    export default {
        data(){
            return {
                collapse: false
            }
        }
    }
</script>

<style lang="scss">

    aside {
        width: 100%;
        height: 100%;

        .el-menu {
            height: 100%;
        }

        .menu-title {
            height:30px;
            font-size: 13pt;
        }

        .collapsed {
            width:60px;
            .item{
                position: relative;
            }
            .submenu{
                position:absolute;
                top:0px;
                left:60px;
                z-index:99999;
                height:auto;
                display:none;
            }

        }
    }
</style>